<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>系统通知 </title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- NProgress -->
		<!--<link href="css/nprogress.css" rel="stylesheet">-->

		<!-- Custom Theme Style -->
		<link href="css/custom.min.css" rel="stylesheet">
	</head>

	<body class="nav-md">
		<div class="container body">
			<div class="main_container">
				<div id="head">
						</div>

				<!-- top navigation -->
			
				<!-- /top navigation -->
				<!-- page content -->
				<div class="right_col" role="main">
					<div class="">

						<div class="page-title">
							<div class="title_left">
								<h3>我的消息</h3>
							</div>
						</div>

						<div class="clearfix"></div>

						<div class="row">
							<div class="col-md-12">
								<div class="x_panel">
									<div class="x_title">
										<h2>系统通知</h2>
										<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
											<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search" style="margin-bottom:0px;">
												<div class="input-group">
													<label class="control-label col-md-3 col-sm-3 col-xs-12" style="margin-left:150px ;">查询条件：</label>
													<select class='form-control' id='select02' style='width: 50%; float: right;'>
														<option value='1'>全部</option>
														<option value='2'>接单通知</option>
														<option value='3'>入库通知</option>
														<option value='4'>到账通知</option>
													</select>
													<span class='input-group-btn' >
												<button id='button01' class='btn btn-default' type='button' style="margin-top: 27px">查询</button>
											</span>
												</div>
											</div>
										</form>
										<span id="span01" style="color: red;float: right;margin-right:120px ;"></span>
										<div class="clearfix"></div>
									</div>
									<div class="x_content">
										<div class="row" style="margin-left:5px ;">
											<span style="font-size: 16px;">3条未读消息</span>&nbsp;&nbsp;&nbsp;
											<button id="rCompose" class="btn btn-sm btn-info" type="button">全部标为已读</button>
											<button id="compose2" class="btn btn-sm btn-danger" type="button">全部删除</button>
											<button id="compose4" class="btn btn-sm btn-success" type="button" onclick="window.location.href='index.html'">返回首页</button>
										</div>
										<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
											<div class="panel">
												<span class="badge bg-red" style="float: left;margin-left:-5px ;"> </span>
												<a class="panel-heading " role="tab" id="heading01" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="spanHide(this)">
													<h4 class="panel-title">接单通知 <span class="time" style="margin-left:50px ;">2019-01-01 15:50:00</span></h4>
												</a>
												<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
													<div class="panel-body">
														<h4>发件人：美的——王主管</h4>
														<h4>时间：2019-01-01 16:10:00</h4>
														<h4>收件人：老万</h4>
														<h4>信息内容：</h4>
														<blockquote>
															<p>我司有一批运往加拿大的化妆品货物，希望赶紧上门接单取货！</p>
														</blockquote>
														<button id="compose" class="btn btn-sm btn-default" type="button" style="float: right;">删除</button>
													</div>
												</div>
											</div>
											<div class="panel">
												<span class="badge bg-red" style="float: left;margin-left:-5px ;"> </span>
												<a class="panel-heading collapsed" role="tab" id="heading02" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="spanHide(this)" >
													<h4 class="panel-title">入库通知 <span class="time" style="margin-left:50px ;">2019-01-01 16:00:00</span></h4>
												</a>
												<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
													<div class="panel-body">
														<h4>发件人：老万</h4>
														<h4>时间：2019-01-01 16:00:00</h4>
														<h4>收件人：罗主管</h4>
														<h4>信息内容：</h4>
														<blockquote>
															<p>美的运往加拿大的化妆品货物已经核实，可以入库进行订舱操作，请赶紧入库！</p>
														</blockquote>
														<button id="compose" class="btn btn-sm btn-default" type="button" style="float: right;">删除</button>
													</div>
												</div>
											</div>
											<div class="panel">
												<span class="badge bg-red" style="float: left;margin-left:-5px ;"> </span>
												<a class="panel-heading collapsed" role="tab" id="heading03" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="spanHide(this)">
													<h4 class="panel-title">到账通知 <span class="time" style="margin-left:50px ;">2019-01-01 15:50:00</span></h4>
												</a>
												<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
													<div class="panel-body">
														<h4>发件人：美的——梁财务</h4>
														<h4>时间：2019-01-01 15:50:00</h4>
														<h4>收件人：小刚</h4>
														<h4>信息内容：</h4>
														<blockquote>
															<p>贵司账号有20,000从美的财务通过支付宝交付的款项已经到账，请注意查收。</p>
														</blockquote>
														<button id="compose" class="btn btn-sm btn-default" type="button" style="float: right;">删除</button>
													</div>
												</div>
											</div>
											<br />
											<div class="row">
												<div class="btn-toolbar" style="margin-left:12px;">
													<span style="font-size: 14px;">共3条记录&nbsp;第1页/共1页</span>
													<div class="btn-group" style="float: right;margin-right:10px ;">
														<button class="btn btn-primary" type="button">首页</button>
														<button class="btn btn-primary" type="button">上一页</button>
														<button class="btn btn-primary" type="button">下一页</button>
														<button class="btn btn-primary" type="button">末页</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /page content -->

				<!-- footer content -->
				<footer>
					<div class="pull-right" style="font-size: large">
						GLS国际物流系统通知 <a href="https://colorlib.com"></a>
					</div>
					<div class="clearfix"></div>
				</footer>
				<!-- /footer content -->
			</div>
		</div>

		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- FastClick -->
		<script src="js/fastclick.js"></script>
		<!-- NProgress -->
		<script src="js/nprogress.js"></script>
		<!-- validator -->
		<script src="js/validator.js"></script>
			<script type="text/javascript">
                function spanHide(obj){
                    $(obj).prev().hide();
                }
                $("#rCompose").on("click",function(){
                    $(".panel").children("span").hide();
                });

                $(function(){
                    let dt = setInterval(function(){$.get('js/message.json',null,call_back);},1000*5);
                    function call_back(data){
                        let count = data.message.length;
                        if(count > 0){
                            $("#message_new").show();
                            $("#message_new").text(count);
                            let $add = '';
                            $(data.message).each(function(){
                                $add += '<li><a><span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>'+
                                    '<span><span>'+this.sender+'</span><span class="time">1分钟前</span>'+
                                    '</span><span class="message">'+this.content+'</span></a><>';
                            });
                            $add += '<li><div class="text-center"><a><strong>查看所有信息'+
                                '<i class="fa fa-angle-right"></i></a></div><>';
                            $("#menu1").children().remove().end().append($add);
                        }else{
                            $("#message_new").text("");
                            $("#message_new").hide();
                            return ;
                        }
                    }
                });

			</script>
		<!-- Custom Theme Scripts -->

		<!-- validator -->
		<script>
				$(document).ready(function(){
					$("#head").load("head.html");
				});
			// initialize the validator function
			validator.message.date = 'not a real date';

			// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
			$('form')
				.on('blur', 'input[required], input.optional, select.required', validator.checkField)
				.on('change', 'select.required', validator.checkField)
				.on('keypress', 'input[required][pattern]', validator.keypress);

			$('.multi.required').on('keyup blur', 'input', function() {
				validator.checkField.apply($(this).siblings().last()[0]);
			});

			$('form').submit(function(e) {
				e.preventDefault();
				var submit = true;

				// evaluate the form using generic validaing
				if (!validator.checkAll($(this))) {
					submit = false;
				}

				if (submit)
					this.submit();

				return false;
			});
		</script>
		<!-- /validator -->
	</body>
</html>
